<template>
  <div class="business-wrapper home-section">
    <div class="business-content">
      <div class="section-title">
        <h1 class="title-main">优质商家</h1>
        <p class="title-tips">行业热门商品一键直达</p>
      </div>
      <div class="section">
        <div v-for="(item, index) in BusinessList" :key="index" class="business">
          <div class="business-title">
            <div class="img"></div>
            <div class="business-info">
              <div class="business-name">{{ item.companyName }}</div>
              <div class="business-con">
                <div>主营产品：<span>{{ item.product }}</span></div>
                <div>
                  <i class="iconfont">&#xe60c;</i>{{ item.address }}
                </div>
              </div>
            </div>
            <el-button size="small" class="business-detail">查看详情</el-button>
          </div>
          <div class="product-section">
            <div v-for="item in 2" :key="item" class="business-product">
              <div class="product-img"></div>
              <div class="product-picture">
                <div></div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="more">查看更多</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      BusinessList: [
        {
          companyName: '浙江古川机械有限公司',
          product: '食品包装机械',
          address: '上海市-上海市'
        },
        {
          companyName: '浙江古川机械有限公司',
          product: '食品包装机械',
          address: '上海市-上海市'
        },
        {
          companyName: '浙江古川机械有限公司',
          product: '食品包装机械',
          address: '上海市-上海市'
        },
        {
          companyName: '浙江古川机械有限公司',
          product: '食品包装机械',
          address: '上海市-上海市'
        }
      ]
    }
  }
}
</script>

<style scoped lang='scss'>
@import "@/style/color.scss";
.business-wrapper {
  background-color: #F5F5F5;
}
.business-content {
  width: $bigWidth;
  margin: 0 auto;;
}
.section {
  display: flex;
  flex-wrap: wrap;
}
.business {
  width: 590px;
  height: 300px;
  background-color: #fff;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px 15px 20px;
  position: relative;
  .business-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .img {
      width: 60px;
      height: 60px;
      background: #F5F5F5;
    }
    .business-info {
      flex-grow: 1;
      padding: 0 30px 0 14px;
      .business-name {
        font-size: 16px;
        color: #333333;
        margin-bottom: 10px;
      }
      .business-con {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #999999;
        span {
          color: $greenColor;
        }
      }
      .iconfont {
        font-size: 12px;
        margin-right: 4px;
      }
    }
    .business-detail {
      background-color: #f0f9eb;
      color: $greenColor;
      border: 1px solid $greenColor;
    }
  }
  .product-section {
    display: flex;
    margin-top: 20px;
    .business-product {
      display: flex;
      margin-right: 10px;
      .product-img {
        width: 180px;
        height: 180px;
        background: #F5F5F5;
        margin-right: 10px;
      }
      .product-picture {
        display: flex;
        flex-direction: column;
        div {
          width: 85px;
          height: 85px;
          background: #F5F5F5;
          margin-bottom: 10px;
        }
      }
    }
    .business-product:nth-child(2n) {
      margin-right: 0;
    }
  }
}
.business:nth-child(2n) {
  margin-right: 0;
}
.more {
  width: 120px;
  height: 26px;
  border-radius: 13px;
  background-color: rgba(153, 153, 153, 0.15);
  margin: 20px auto 0;
  font-size: 14px;
  color: #666666;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
}
</style>
